<script setup>
import {toRefs} from "vue";
import {replaceResource} from "@/assets/js/routerUtils";
import {suffix} from "@/assets/js/Image";

const props = defineProps({
  src: {type: String},
})
const {src} = toRefs(props)

const pattern = /\/mon_.+/


const getSrc = (src) => {
  const matcher = pattern.exec(src)
  if (matcher) {
    return "/attachments" + matcher[0]
  }
  return replaceResource(src)
}
const getSrcList = (url) => {
  for (let i = 0; i < suffix.length; i++) {
    const e = suffix[i]
    if (url.endsWith(e)) {
      return [getSrc(url.replace(e, ''))]
    }
  }
  return undefined
}
</script>

<template>
  <el-image :preview-src-list="getSrcList(src)" :src="getSrc(src)" close-on-press-escape hide-on-click-modal/>
</template>

<style scoped>

</style>